<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col v-if="applyObjectType === 0" :span="24">
            <a-form-model-item label="公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseName">
              <a-input v-model="model.enterpriseName" placeholder="请输入公司名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPerson">
              <a-input v-model="model.contactPerson" placeholder="请输入联系人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="联系手机号："
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="contactPhoneNumber"
            >
              <a-input v-model="model.contactPhoneNumber" placeholder="请输入联系手机号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactTelephone">
              <a-input v-model="model.contactTelephone" placeholder="请输入联系电话"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col v-if="isCostShow && applyObjectType === 0" :span="24">
            <div class="apply-cost-container">
              <label class="apply-cost-title">
                参展价格：
                <span class="apply-cost-number">￥{{ model.exhibitorCost }}</span>
              </label>
              <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <payment-radio-panel class="payment-radio-panel" />
              </a-form-model-item>
            </div>
          </a-col>

          <div v-if="isCostShow && applyObjectType === 1">
            <a-col :span="24">
              <a-form-model-item label="门票数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quantity">
                <a-input-number v-model="model.quantity" placeholder="请输入门票数量" style="width: 100%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <div class="apply-cost-container">
                <label class="apply-cost-title"
                  >门票单价：

                  <span class="apply-cost-number">￥{{ info.audienceCost }}</span>
                </label>
                <label class="apply-cost-title">
                  总计：<span class="apply-cost-number">￥{{ totalAmount }}</span>
                </label>
                <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <payment-radio-panel class="payment-radio-panel" />
                </a-form-model-item>
              </div>
            </a-col>
          </div>

          <a-col :span="24">
            <a-form-model-item label="联系人邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactEmail">
              <a-input v-model="model.contactEmail" placeholder="请输入联系人邮箱"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="联系人职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPosition">
              <a-input v-model="model.contactPosition" placeholder="请输入联系人职位"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="公司类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseType">
              <a-input v-model="model.enterpriseType" placeholder="请输入公司类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="公司行业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseIndustry">
              <a-input v-model="model.enterpriseIndustry" placeholder="请输入公司行业"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="主营产品" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainProducts">
              <a-input v-model="model.mainProducts" placeholder="请输入主营产品"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="4" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import PaymentRadioPanel from '@/views/order/components/PaymentRadioPanel'
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  name: 'HTIndustrySalonApplyForm',
  components: {
    PaymentRadioPanel,
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      loading: false,
      applyObjectType: undefined,
      id: undefined,

      model: {
        applyObjectType: undefined,
        id: undefined,
        quantity: 1,
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      // validatorRules: {
      //   quantity: [
      //     { required: true, message: '请输入门票数量!' },
      //     { pattern: /^-?\d+$/, message: '请输入整数!' },
      //   ],
      //   enterpriseName: [{ required: true, message: '请输入公司名称!' }],
      //   contactPerson: [{ required: true, message: '请输入联系人!' }],
      //   contactPhoneNumber: [
      //     { required: true, message: '请输入联系手机号!' },
      //     { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' },
      //   ],
      //   contactEmail: [
      //     { required: false },
      //     { pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/, message: '请输入正确的邮箱!' },
      //   ],
      // },
    }
  },

  computed: {
    validatorRules() {
      if (this.applyObjectType === 0) {
        return {
          enterpriseName: [{ required: true, message: '请输入公司名称!' }],
          contactPerson: [{ required: true, message: '请输入联系人!' }],
          contactPhoneNumber: [
            { required: true, message: '请输入联系手机号!' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' },
          ],
          contactEmail: [
            { required: false },
            { pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/, message: '请输入正确的邮箱!' },
          ],
        }
      } else {
        return {
          quantity: [
            { required: true, message: '请输入门票数量!' },
            { pattern: /^-?\d+$/, message: '请输入整数!' },
          ],
          contactPerson: [{ required: true, message: '请输入联系人!' }],
          contactPhoneNumber: [
            { required: true, message: '请输入联系手机号!' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' },
          ],
          contactEmail: [
            { required: false },
            { pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/, message: '请输入正确的邮箱!' },
          ],
        }
      }
    },

    formDisabled() {
      return this.disabled || this.hasApplied
    },

    ...mapState('industrySalon', {
      info: (state) => state.info,
      applyInfo: (state) => state.applyInfo,
      paymentId: (state) => state.paymentId,
    }),

    ...mapGetters('order', ['checkedPayment', 'totalPaymentAmount', 'leaveMessageInfo']),

    ...mapState('payment', {
      jsapiPaymentInfo: (state) => state.jsapiPaymentInfo,
      paymentInfo: (state) => state.info,
    }),

    hasApplied() {
      return this.applyInfo && this.applyInfo.contactPerson && this.applyInfo.contactPhoneNumber ? true : false
    },

    submitButtonTitle() {
      return this.hasApplied ? '已报名' : '提交'
    },

    totalAmount: {
      cache: false,
      get() {
        const quantity = this.model.quantity ? this.model.quantity : 0
        //applyObjectType-报名对象 0-展商 1-观众
        //applyType-报名类型 0-会议 1-会展 2-沙龙
        if (this.applyObjectType == 0) {
          const exhibitorCost = this.model.exhibitorCost ? this.model.exhibitorCost * 1 : 0
          return exhibitorCost
        } else {
          const audienceCost = this.model.audienceCost ? this.model.audienceCost * 1 : 0
          return audienceCost * quantity
        }
      },
    },

    isCostShow: {
      cache: false,
      get() {
        if (this.applyObjectType === 0) {
          return this.model.exhibitorCost * 1 > 0 ? true : false
        } else {
          return this.model.audienceCost * 1 > 0 ? true : false
        }
      },
    },
  },

  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },

  methods: {
    ...mapActions('industrySalon', ['getSalonInfoAction', 'salonApplyAction', 'getSalonApplyInfoAction']),
    ...mapActions('payment', ['getPaymentInfoAction']),

    add(parameters) {
      if (parameters && 'applyObjectType' in parameters && 'id' in parameters) {
        this.applyObjectType = parameters.applyObjectType
        this.id = parameters.id
        this.updateApplyInfo()
      } else {
        console.log('\n\n parameters不能为空 applyObjectType不能为空 id 不能为空 ' + '\n\n')
      }
    },

    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },

    //获取报名信息
    updateApplyInfo() {
      const that = this
      if (that.isSignedIn) {
        const parameters = { applyObjectType: that.applyObjectType, salonId: that.id }
        that
          .getSalonApplyInfoAction(parameters)
          .then(() => {
            that.handleApplyInfoActionResult()
          })
          .catch((error) => {
            that.$message.error(error.message)
          })
      }
    },

    handleApplyInfoActionResult() {
      const that = this
      if (that.hasApplied) {
        that.model = Object.assign(that.applyInfo)
      }

      that.getSalonInfo()
    },

    getSalonInfo() {
      const that = this
      const parameters = { id: this.id }
      this.getSalonInfoAction(parameters)
        .then(() => {
          if (that.applyObjectType === 0) {
            that.model.exhibitorCost = that.info.exhibitorCost
          } else {
            that.model.audienceCost = that.info.audienceCost
          }

          that.$forceUpdate()
        })
        .catch((error) => {
          that.$message.error(error.message)
        })
    },

    handleApplySuccessForCost(res) {
      return new Promise((resolve, reject) => {
        const that = this
        const parameters = { id: that.paymentId }
        that
          .getPaymentInfoAction(parameters)
          .then((response) => {
            if (that.paymentInfo.id) {
              that.$router.push({
                path: '/payment/home',
                query: { paymentQuery: JSON.stringify({ paymentId: that.paymentInfo.id }) },
              })
            } else {
              that.$message.error('获取支付信息失败，请稍后再订单中继续支付')
            }

            resolve(response)
            that.$emit('ok')
          })
          .catch((error) => {
            reject(error)
          })
      })
    },

    handleApplySuccessForFree(res) {
      const that = this
      return new Promise((resolve, reject) => {
        if (res.success) {
          resolve(res)
          that.$message.success('报名成功')
          that.$emit('ok')
        } else {
          reject(res)
          that.$message.error(res.message)
        }
      })
    },

    submitForm(parameters) {
      return new Promise((resolve, reject) => {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.confirmLoading = true

            const parameters = {
              ...that.model,
              totalAmount: that.totalAmount,
              paymentType: that.checkedPayment.paymentType,
              salonId: that.id,
              applyObjectType: that.applyObjectType,
            }

            that
              .salonApplyAction(parameters)
              .then((res) => {
                if (that.isCostShow) {
                  that.handleApplySuccessForCost(res)
                } else {
                  that.handleApplySuccessForFree(res)
                }
              })
              .catch((error) => {
                that.$message.error(error.message)
              })
              .finally(() => {
                that.confirmLoading = false
              })
          }
        })
      })
    },
  },
}
</script>

<style scoped>
.apply-cost-container {
  margin: 0 80px !important;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.apply-cost-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  padding: 10px 0;
}
.apply-cost-number {
  color: red;
  font-size: 16px;
  font-weight: 600;
}
.section-header {
  padding: 0 0;
}
.payment-radio-panel {
  padding: 0 0;
}
</style>

